<template>
  <div class='exam-dialog'>
    <el-dialog title="考试信息" top="10px" class="large_dialog" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form ref="form" :model="formData" :rules="rules" label-width="160px" size="small">
        <el-form-item label="考试名称:" prop="examName">
          <el-input placeholder="请输入考试名称" v-model="formData.examName" />
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="试卷名称:" prop="examPaperName">
              <el-input v-model="formData.examPaperName" disabled />
              <el-button @click="papaerSelect" type="primary" class="btn_primary">试卷选择</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="考试限时:" prop="examDuration">
              <el-input v-model="formData.examDuration" type="number" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="通过分数:" prop="examPassScore">
              <el-input v-model="formData.examPassScore" type="number" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="考试对象:" prop="examTarget">
          <el-input placeholder="考试对象" v-model="formData.examTarget	" />
        </el-form-item>
        <el-form-item label="考试范围:" prop="examRange">
          <el-input placeholder="请输入考试范围" v-model="formData.examRange" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="考试开始时间:" prop="examStartTime">
              <el-date-picker v-model="formData.examStartTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" start-placeholder="考试开始时间"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考试结束时间:" prop="examEndTime">
              <el-date-picker v-model="formData.examEndTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" start-placeholder="考试结束时间"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn_cancel">取 消</el-button>
        <el-button @click="submitForm" type="primary" class="btn_primary">确 认</el-button>
      </div>
    </el-dialog>
    <SelectPaperDialog ref="selectPaperDialog" @listChange="papaerChange"></SelectPaperDialog>
  </div>
</template>

<script>
import { addExam, updateExam } from '@/api/examination'
import SelectPaperDialog from './SelectPaperDialog'
export default {
  data () {
    return {
      dialogVisible: false,
      // 表单数据
      formData: {},
      // 验证规则
      rules: {
        examName: [{ required: true, message: '请输入考试名称', trigger: 'blur' }],
        examPaperName: [{ required: true, message: '请输入试卷名称', trigger: 'blur' },],
        examTarget: [{ required: true, message: '请输入考试对象', trigger: 'blur' },],
        examRange: [{ required: true, message: '请输入考试范围', trigger: 'blur' }],
        examStartTime: [{ required: true, message: '请输入考试日期时间', trigger: 'change' }],
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    // show 方法
    show (data) {
      this.dialogVisible = true
      this.resetForm()
      console.log(data)
      if (data !== undefined) {
        this.$nextTick(() => {
          this.formData = JSON.parse(JSON.stringify(data))
        })
      }
    },
    // 清空formData 
    resetForm () {
      this.formData = {
        examDuration: 0,
        examEndTime: undefined,
        examName: undefined,
        examPaperId: 0,
        examPaperName: undefined,
        examPassScore: undefined,
        examRange: undefined,
        examStartTime: undefined,
        examTarget: undefined,
        examEndTime: undefined
      }
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    },
    // 点击提交按钮 
    async submitForm () {
      try {
        const isAddOperation = this.formData.examId === undefined
        const method = isAddOperation ? addExam : updateExam
        console.log(isAddOperation)
        const message = isAddOperation ? '新增成功' : '修改成功'
        const response = await method(this.formData)
        if (response.code === 200) {
          this.dialogVisible = false
          this.$message.success(message)
          this.$emit('replace')
        }
      }
      catch (error) {
        this.$emit('replace')
        // this.$message.error('操作失败')
      }
    },
    papaerSelect () {
      this.$nextTick(() => {
        this.$refs.selectPaperDialog.show()
      })
    },
    papaerChange (val) {
      const { examPaperName, examDuration, examPassScore, examPaperId } = val[0]
      this.formData = {
        ...this.formData,
        examPaperName,
        examDuration,
        examPassScore,
        examPaperId
      }
    }
  },
  created () {

  },
  mounted () {

  },
  components: {
    SelectPaperDialog
  },
}
</script>

<style lang='less' scoped>
</style>